<template>
  <el-container class="aliali-player-container">
    <!-- 主要内容区 -->
    <el-main class="main-content">
      <el-row :gutter="20">
        <!-- 视频播放器区域 -->
        <el-col :span="17">
          <div class="video-container">
            <!-- 视频播放器 -->
            <div id="dplayer-container" ref="dplayerRef"></div>

            <!-- 视频信息 -->
            <div class="video-info">
              <h1 class="video-title">{{ currentVideo.title }}</h1>
              <div class="video-stats">
                <span class="play-count">
                  <el-icon><View /></el-icon>
                  {{ formatCount(currentVideo.playCount) }}
                </span>
                <span class="danmaku-count">
                  <el-icon><ChatDotRound /></el-icon>
                  {{ formatCount(currentVideo.danmakuCount) }}
                </span>
                <span class="upload-time">{{ currentVideo.uploadTime }}</span>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button-group>
                <el-button
                    :type="isLiked ? 'success' : 'primary'"
                    :icon="Pointer"
                    @click="handleLike"
                >
                  {{ isLiked ? '已点赞' : '点赞' }} {{ currentVideo.likeCount }}
                </el-button>
                <el-button
                    :type="isCollected ? 'warning' : 'primary'"
                    :icon="Star"
                    @click="handleCollect"
                >
                  {{ isCollected ? '已收藏' : '收藏' }} {{ currentVideo.collectCount }}
                </el-button>
                <el-button type="primary" :icon="Share" @click="handleShare">
                  分享
                </el-button>
              </el-button-group>

              <el-button
                  class="subscribe-btn"
                  :type="isSubscribed ? 'info' : 'danger'"
                  :icon="Plus"
                  @click="handleSubscribe"
              >
                {{ isSubscribed ? '已关注' : '关注 UP 主' }}
              </el-button>
            </div>

            <!-- 弹幕发送区 -->
            <div class="danmaku-sender">
              <el-input
                  v-model="danmakuText"
                  placeholder="发个友善的弹幕见证当下~"
                  class="danmaku-input"
              >
                <template #append>
                  <el-button
                      type="primary"
                      @click="sendDanmaku"
                      :disabled="!danmakuText.trim()"
                  >
                    发送弹幕
                  </el-button>
                </template>
              </el-input>

              <div class="danmaku-settings">
                <el-select v-model="danmakuColor" size="small">
                  <el-option label="白色" value="#ffffff"></el-option>
                  <el-option label="红色" value="#ff0000"></el-option>
                  <el-option label="蓝色" value="#00a1d6"></el-option>
                  <el-option label="绿色" value="#00d100"></el-option>
                </el-select>

                <el-select v-model="danmakuType" size="small">
                  <el-option label="滚动" value="scroll"></el-option>
                  <el-option label="顶部" value="top"></el-option>
                  <el-option label="底部" value="bottom"></el-option>
                </el-select>
              </div>
            </div>

            <!-- 评论区域 -->
            <div class="comments-section">
              <h3 class="comments-title">评论 ({{ comments.length }})</h3>

              <!-- 评论加载状态 -->
              <div v-if="loadingComments" class="loading-comments">
                <el-icon class="loading-icon"><Loading /></el-icon>
                <span>评论加载中...</span>
              </div>

              <!-- 评论列表 -->
              <div v-else-if="comments.length > 0" class="comments-list">
                <div v-for="comment in comments" :key="comment.id" class="comment-item">
                  <el-avatar :src="comment.avatar" size="small" />
                  <div class="comment-content">
                    <div class="comment-header">
                      <span class="comment-username">{{ comment.username }}</span>
                      <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                    </div>
                    <p class="comment-text">{{ comment.content }}</p>
                    <div class="comment-actions">
                      <span class="comment-like">
                        <el-icon><Pointer /></el-icon>
                        {{ comment.likeCount }}
                      </span>
                      <span class="comment-reply">回复</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 无评论提示 -->
              <div v-else class="no-comments">
                暂无评论，快来发表第一条评论吧~
              </div>

              <!-- 发表评论区域 -->
              <div class="add-comment">
                <el-input
                    v-model="newComment"
                    placeholder="写下你的评论..."
                    type="textarea"
                    :rows="3"
                    resize="none"
                />
                <div class="comment-actions">
                  <el-button type="primary" size="small" @click="submitComment">
                    发表评论
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 推荐视频列表 -->
        <el-col :span="7">
          <div class="recommend-list">
            <h3 class="recommend-title">推荐视频</h3>
            <div
                v-for="video in recommendVideos"
                :key="video.id"
                class="recommend-item"
                @click="switchVideo(video)"
            >
              <el-image
                  :src="video.thumbnail"
                  fit="cover"
                  class="recommend-thumb"
              />
              <div class="recommend-info">
                <p class="recommend-video-title">{{ video.title }}</p>
                <p class="recommend-upname">{{ video.upName }}</p>
                <p class="recommend-stats">
                  <span>{{ formatCount(video.playCount) }}播放</span>
                  <span>{{ formatCount(video.danmakuCount) }}弹幕</span>
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import DPlayer from 'dplayer'
import { ElMessage } from "element-plus";
import request from '@/utils/request';
import { adaptVideoForPlayback } from '@/utils/videoAdapter';
import { adaptUser } from '@/utils/userAdapter';
import {
  View,
  ChatDotRound,
  Pointer,
  Star,
  Share,
  Plus,
  Loading
} from '@element-plus/icons-vue'

// 视频数据
const currentVideo = ref({
  id: '',
  title: '',
  url: '',
  thumbnail: '',
  playCount: '',
  danmakuCount: 0,
  likeCount: 0,
  collectCount: 0,
  uploadTime: '',
  upName: ''
})

// 推荐视频列表
const recommendVideos = ref([
  {
    id: 2,
    title: 'Element Plus 组件库深度解析',
    thumbnail: '/thumbnails/test.jpg',
    playCount: 89000,
    danmakuCount: 2100,
    upName: 'UI设计之家',
    url: 'https://example.com/video2.mp4'
  }
])

// DPlayer实例
const dp = ref(null)
const dplayerRef = ref(null)
const error = ref(null)

// 弹幕相关
const danmakuText = ref('')
const danmakuColor = ref('#ffffff')
const danmakuType = ref('scroll')

// 用户交互状态
const isLiked = ref(false)
const isCollected = ref(false)
const isSubscribed = ref(false)

// 评论相关
const comments = ref([])
const loadingComments = ref(false)
const newComment = ref('')

// 获取视频数据
const getVideo = async (videoId) => {
  error.value = ''

  try {
    const response = await request.get(`/video/${videoId}`)

    // 根据常见的REST API响应格式调整
    const responseData = response.data.data || response.data

    if (responseData) {
      // 使用适配器转换后端Video对象
      const adaptedVideo = adaptVideoForPlayback(responseData)
      if (adaptedVideo) {
        currentVideo.value = adaptedVideo
        ElMessage.success('视频加载成功')
      } else {
        throw new Error('视频数据格式错误')
      }
    } else {
      throw new Error('视频数据格式错误')
    }
  } catch (err) {
    error.value = err.response?.data?.message || err.message || '网络请求失败'
    ElMessage.error('视频加载失败: ' + error.value)
    console.error('获取视频数据错误:', err)
  }
}

/**
 * 获取评论数据
 */
const fetchComments = async (videoId) => {
  loadingComments.value = true
  try {
    const response = await request.get(`/comment/${videoId}`)

    // 根据常见的REST API响应格式调整
    const responseData = response.data.data || response.data

    if (responseData && Array.isArray(responseData)) {
      comments.value = responseData.map(comment => ({
        id: comment.id,
        username: comment.username || '匿名用户',
        avatar: comment.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        content: comment.content,
        likeCount: comment.likeCount || 0,
        createTime: comment.createTime || new Date().toISOString()
      }))
    } else {
      throw new Error('评论数据格式错误')
    }
  } catch (err) {
    ElMessage.error('评论加载失败: ' + (err.response?.data?.message || err.message || '网络请求失败'))
    console.error('获取评论数据错误:', err)
  } finally {
    loadingComments.value = false
  }
}

/**
 * 提交新评论
 */
const submitComment = async () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }

  try {
    // 模拟提交评论
    const newCommentData = {
      id: Date.now(),
      username: '当前用户',
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      content: newComment.value,
      likeCount: 0,
      createTime: new Date().toISOString()
    }

    // 添加到评论列表
    comments.value.unshift(newCommentData)
    newComment.value = ''
    ElMessage.success('评论发表成功')

    // 实际项目中应该发送POST请求到后端
    // await axios.post(`http://localhost:80/comment/${currentVideo.value.id}`, {
    //   content: newComment.value
    // })

  } catch (err) {
    ElMessage.error('评论发表失败: ' + (err.response?.data?.message || err.message || '网络请求失败'))
    console.error('发表评论错误:', err)
  }
}

/**
 * 切换视频
 */
const switchVideo = async (video) => {
  // 更新当前视频数据
  currentVideo.value = { ...video }

  // 重新初始化播放器
  await initPlayer()

  // 获取新视频的评论
  fetchComments(video.id)

  ElMessage.success('已切换到新视频')
}

/**
 * 初始化播放器
 */
const initPlayer = async () => {
  // 先销毁已有播放器实例
  if (dp.value) {
    dp.value.destroy()
    dp.value = null
  }

  // 等待DOM渲染完成
  await nextTick()

  if (!dplayerRef.value) {
    error.value = '播放器容器未找到'
    return
  }

  try {
    // 确保有视频URL再初始化播放器
    if (!currentVideo.value.url) {
      throw new Error('视频URL为空')
    }

    dp.value = new DPlayer({
      container: dplayerRef.value,
      autoplay: false,
      theme: '#00a1d6',
      loop: false,
      lang: 'zh-cn',
      screenshot: true,
      hotkey: true,
      preload: 'metadata',
      volume: 0.7,
      mutex: true,
      video: {
        url: currentVideo.value.url,
        pic: currentVideo.value.thumbnail || '',
        type: 'auto'
      },
      danmaku: {
        id: currentVideo.value.id ? currentVideo.value.id.toString() : 'default',
        api: '',
        maximum: 3000,
        addition: [],
        user: '游客',
        bottom: '15%',
        unlimited: true
      }
    })

    // 添加播放器事件监听
    dp.value.on('play', () => {
      console.log('视频开始播放')
    })

    dp.value.on('pause', () => {
      console.log('视频暂停')
    })

    dp.value.on('ended', () => {
      console.log('视频播放结束')
      ElMessage.success('播放完成')
    })

    dp.value.on('error', (e) => {

      console.error('播放器错误:', e)

      ElMessage.error('视频播放错误，请检查网络或视频文件')

    })



    // 添加全屏事件监听

    dp.value.on('fullscreen', () => {

      console.log('进入全屏')

    })



    dp.value.on('fullscreen_cancel', () => {

      console.log('退出全屏')

    })

  } catch (err) {
    error.value = '播放器初始化失败: ' + err.message
    ElMessage.error(error.value)
    console.error('播放器初始化错误:', err)
  }
}

// 发送弹幕

const sendDanmaku = () => {

  if (!danmakuText.value.trim() || !dp.value) return



  try {

    dp.value.danmaku.send({

      text: danmakuText.value,

      color: danmakuColor.value,

      type: danmakuType.value

    })



    danmakuText.value = ''

    currentVideo.value.danmakuCount++

    ElMessage.success('弹幕发送成功！')

  } catch (error) {

    console.error('弹幕发送失败:', error)

    ElMessage.error('弹幕发送失败，请重试')

  }

}

// 点赞处理
const handleLike = async () => {
  if (!currentVideo.value.id) {
    ElMessage.warning('视频信息未加载完成')
    return
  }

  try {
    const videoId = currentVideo.value.id

    if (isLiked.value) {
      // 取消点赞 - DELETE请求
      await request.delete(`/video/like`, {
        data: {
          "videoId": videoId
        }
      })
      isLiked.value = false
      currentVideo.value.likeCount = Math.max(0, currentVideo.value.likeCount - 1)
      ElMessage.success('已取消点赞')
    } else {
      // 点赞 - POST请求
      await request.post(`/video/like`, {
        videoId: videoId
      })
      isLiked.value = true
      currentVideo.value.likeCount += 1
      ElMessage.success('点赞成功！')
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    ElMessage.error(error.response?.data?.message || '操作失败，请重试')
  }
}

// 收藏处理
const handleCollect = async () => {
  if (!currentVideo.value.id) {
    ElMessage.warning('视频信息未加载完成')
    return
  }

  try {
    const videoId = currentVideo.value.id

    if (isCollected.value) {
      // 取消收藏 - DELETE请求
      await request.delete(`/video/collect`, {
        data: { videoId }
      })
      isCollected.value = false
      currentVideo.value.collectCount = Math.max(0, currentVideo.value.collectCount - 1)
      ElMessage.success('已取消收藏')
    } else {
      // 收藏 - POST请求
      await request.post(`/video/collect`, {
        videoId: videoId
      })
      isCollected.value = true
      currentVideo.value.collectCount += 1
      ElMessage.success('收藏成功！')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error(error.response?.data?.message || '操作失败，请重试')
  }
}

// 关注处理

const handleSubscribe = async () => {

  if (!currentVideo.value.upId) {

    ElMessage.warning('UP主信息未加载完成')

    return

  }



  try {

    const userId = currentVideo.value.upId



    if (isSubscribed.value) {

      // 取消关注 - DELETE请求

      await request.delete(`/user/follow`, {

        data: {

          "userId": userId

        }

      })

      isSubscribed.value = false

      ElMessage.success('已取消关注')

    } else {

      // 关注 - POST请求

      await request.post(`/user/follow`, {

        userId: userId

      })

      isSubscribed.value = true

      ElMessage.success('关注成功！')

    }

  } catch (error) {

    console.error('关注操作失败:', error)

    ElMessage.error(error.response?.data?.message || '操作失败，请重试')

  }

}

// 分享处理
const handleShare = () => {
  ElMessage.info('分享功能开发中...')
}

// 格式化数字显示
const formatCount = (count) => {
  if (!count) return '0'
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}

// 格式化时间显示
const formatTime = (timeString) => {
  if (!timeString) return '未知时间'
  try {
    const date = new Date(timeString)
    return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN')
  } catch {
    return timeString
  }
}

/**

 * 获取视频点赞状态

 */

const fetchVideoLikeStatus = async (videoId) => {

  try {

    const response = await request.get(`/video/like/status`, {

      params: {

        videoId: videoId

      }

    })



    if (response.status === 200 && response.data.code === 0) {

      const status = response.data.data?.status

      // 0 表示已点赞，1 表示未点赞

      isLiked.value = status === 0

    } else {

      console.error('获取视频点赞状态失败:', response.data.message || '服务器返回错误状态')

    }

  } catch (error) {

    console.error('获取视频点赞状态失败:', error)

    // 如果请求失败，默认为未点赞状态

    isLiked.value = false

  }

}



/**

 * 获取视频收藏状态

 */

const fetchVideoCollectStatus = async (videoId) => {

  try {

    const response = await request.get(`/video/collect/status`, {

      params: {

        videoId: videoId

      }

    })



    if (response.status === 200 && response.data.code === 0) {

      const status = response.data.data?.status

      // 0 表示已收藏，1 表示未收藏

      isCollected.value = status === 0

    } else {

      console.error('获取视频收藏状态失败:', response.data.message || '服务器返回错误状态')

    }

  } catch (error) {

    console.error('获取视频收藏状态失败:', error)

    // 如果请求失败，默认为未收藏状态

    isCollected.value = false

  }

}



/**

 * 获取用户关注状态

 */

const fetchUserFollowStatus = async (userId) => {

  try {

    const response = await request.get(`/user/follow/status`, {

      params: {

        userId: userId

      }

    })



    if (response.status === 200 && response.data.code === 0) {

      const status = response.data.data?.status

      // 0 表示已关注，1 表示未关注

      isSubscribed.value = status === 0

    } else {

      console.error('获取用户关注状态失败:', response.data.message || '服务器返回错误状态')

    }

  } catch (error) {

    console.error('获取用户关注状态失败:', error)

    // 如果请求失败，默认为未关注状态

    isSubscribed.value = false

  }

}



/**

 * 获取用户信息并更新持久保存

 */

const fetchUserDetails = async () => {

  try {

    const response = await request.get('/user/details')



    if (response.status === 200 && response.data.code === 0) {

      // 使用适配器转换后端User对象

      const userData = response.data.data || response.data

      const adaptedUser = adaptUser(userData)



      if (adaptedUser) {

        // 更新localStorage中的用户信息

        localStorage.setItem('userInfo', JSON.stringify(adaptedUser))



        // 触发用户信息更新事件

        window.dispatchEvent(new CustomEvent('userInfoUpdated', { detail: adaptedUser }))



        console.log('用户信息已更新')

      }

    }

  } catch (error) {

    console.error('获取用户信息失败:', error)

    // 不显示错误提示，避免影响视频播放体验

  }

}

// 生命周期

onMounted(async () => {

  // 获取用户信息

  await fetchUserDetails()



  // 从URL参数获取视频ID，如果没有则使用默认ID

  const urlParams = new URLSearchParams(window.location.search)

  const videoId = urlParams.get('id') || '1111'

  

  // 先获取视频数据，再初始化播放器

  await getVideo(videoId)

  await initPlayer()



  // 获取评论数据

  fetchComments(videoId)

  

  // 获取视频点赞、收藏和用户关注状态

  await fetchVideoLikeStatus(videoId)

  await fetchVideoCollectStatus(videoId)

  // 假设视频数据中有UP主ID，我们从currentVideo中获取

  // 如果currentVideo中有upId字段，使用它，否则等待视频数据加载后再获取

  if (currentVideo.value.upId) {

    await fetchUserFollowStatus(currentVideo.value.upId)

  } else {

    // 如果upId不可用，可以尝试从其他地方获取，比如使用一个定时器等待数据加载

    setTimeout(async () => {

      if (currentVideo.value.upId) {

        await fetchUserFollowStatus(currentVideo.value.upId)

      } else {

        console.warn('无法获取UP主ID，跳过关注状态检查')

      }

    }, 1000)

  }

})

onBeforeUnmount(() => {
  if (dp.value) {
    dp.value.destroy()
    dp.value = null
  }
})
</script>

<style scoped>
.aliali-player-container {
  height: 100vh;
  background: #f4f4f4;
}

.main-content {
  max-width: var(--container-wide-width, 1400px);
  margin: 0 auto;
  padding: var(--spacing-lg, 20px);
  width: 100%;
  box-sizing: border-box;
}

/* 视频容器样式 */
.video-container {
  background: #fff;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#dplayer-container {
  width: 100%;
  height: 500px;
  border-radius: 8px 8px 0 0;
}

/* 视频信息样式 */
.video-info {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.video-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #212121;
}

.video-stats {
  display: flex;
  gap: 20px;
  color: #999;
  font-size: 14px;
}

.video-stats .el-icon {
  margin-right: 4px;
}

/* 操作按钮样式 */
.action-buttons {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.subscribe-btn {
  margin-left: auto;
}

/* 弹幕发送区样式 */
.danmaku-sender {
  padding: 16px 20px;
}

.danmaku-input {
  margin-bottom: 12px;
}

.danmaku-settings {
  display: flex;
  gap: 10px;
}

.danmaku-settings .el-select {
  width: 120px;
}

/* 推荐列表样式 */
.recommend-list {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recommend-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #212121;
}

.recommend-item {
  display: flex;
  margin-bottom: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.3s;
}

.recommend-item:hover {
  background: #f5f5f5;
}

.recommend-thumb {
  width: 120px;
  height: 70px;
  border-radius: 4px;
  margin-right: 12px;
}

.recommend-info {
  flex: 1;
}

.recommend-video-title {
  font-size: 14px;
  color: #212121;
  margin-bottom: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-upname {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.recommend-stats {
  font-size: 12px;
  color: #999;
}

.recommend-stats span {
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    padding: 16px;
  }

  .el-col-17, .el-col-7 {
    width: 100%;
  }

  #dplayer-container {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 12px;
  }

  #dplayer-container {
    height: 300px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .subscribe-btn {
    margin-left: 0;
    width: 100%;
  }
}
/* 评论区域样式 */
.comments-section {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.comments-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #18191c;
  display: flex;
  align-items: center;
}

.comments-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: #00aeec;
  border-radius: 2px;
  margin-right: 8px;
}

/* 评论加载状态 */
.loading-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #999;
}

.loading-icon {
  font-size: 24px;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
  color: #00a1d6;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 评论列表样式 */
.comments-list {
  margin-bottom: 30px;
  max-height: 600px;
  overflow-y: auto;
}

.comment-item {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid #f4f4f5;
  transition: background-color 0.2s;
}

.comment-item:hover {
  background-color: #fafbfc;
  border-radius: 4px;
  padding: 16px;
  margin: 0 -16px;
}

.comment-item:last-child {
  border-bottom: none;
}

/* 评论内容区域 */
.comment-content {
  margin-left: 12px;
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-username {
  font-weight: 600;
  color: #61666d;
  font-size: 14px;
}

.comment-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.comment-text {
  margin: 8px 0;
  line-height: 1.6;
  color: #333;
  font-size: 14px;
  word-wrap: break-word;
}

.comment-actions {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #99a2aa;
  margin-top: 8px;
}

.comment-like, .comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}

.comment-like:hover, .comment-reply:hover {
  background-color: #f4f4f5;
  color: #00a1d6;
}

.comment-like .el-icon, .comment-reply .el-icon {
  margin-right: 4px;
  font-size: 12px;
}

/* 无评论提示 */
.no-comments {
  text-align: center;
  padding: 40px 20px;
  color: #99a2aa;
  font-size: 14px;
  background: #fafbfc;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 发表评论区域 */
.add-comment {
  background: #fafbfc;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e7e7e7;
}

.add-comment .el-textarea {
  margin-bottom: 12px;
}

.add-comment .el-textarea :deep(.el-textarea__inner) {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  resize: vertical;
  font-size: 14px;
  transition: border-color 0.2s;
}

.add-comment .el-textarea :deep(.el-textarea__inner:focus) {
  border-color: #00a1d6;
  box-shadow: 0 0 0 2px rgba(0, 161, 214, 0.1);
}

.add-comment .el-textarea :deep(.el-textarea__inner::placeholder) {
  color: #99a2aa;
}

.comment-submit-actions {
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comments-section {
    padding: 16px;
  }

  .comments-title {
    font-size: 16px;
  }

  .comment-item {
    padding: 12px 0;
  }

  .comment-item:hover {
    padding: 12px;
    margin: 0 -12px;
  }

  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .comment-time {
    align-self: flex-end;
  }

  .add-comment {
    padding: 12px;
  }
}

/* 滚动条样式 */
.comments-list::-webkit-scrollbar {
  width: 6px;
}

.comments-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.comments-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.comments-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>